body{
    background-color:rgba(147,144,144,1.00);
}
#logo{
    height:100px;
    width:350px;
    margin:auto 40% 10% 40%;
}
footer{
    margin:-10px auto;
    text-align:center;
    color:white;
}
.char p{
	text-align:center;
}
.char .char1 i {
	color: rgb(63,187,255);
    filter: alpha(opacity=100);
   	opacity: 1;
    text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-animation: sharpen 0.9s linear backwards;
    animation: sharpen 0.9s linear backwards;
    font-style: normal;
}

.char1 i {
            color: #fff;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
            text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            transition: all 0.3s linear;
            -webkit-animation: sharpen 0.9s linear backwards;
            -moz-animation: sharpen 0.9s linear backwards;
            -ms-animation: sharpen 0.9s linear backwards;
            animation: sharpen 0.9s linear backwards;
            font-style: normal;
}

.char1 i:nth-child(1) {
	-webkit-animation-delay: 1.0s;
	animation-delay: 1.0s;
        }

.char1 i:nth-child(2) {
	-webkit-animation-delay: 1.1s;
	animation-delay: 1.1s;
        }

.char1 i:nth-child(3) {
	-webkit-animation-delay:1.2s;
	animation-delay: 1.2s;
        }

.char1 i:nth-child(4) {
	-webkit-animation-delay: 1.3s;
	animation-delay: 1.3s;
        }

.char1 i:nth-child(5) {
	-webkit-animation-delay: 1.4s;
	animation-delay: 1.4s;
        }

.char1 i:nth-child(6) {
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
        }

.char1 i:nth-child(7) {
	-webkit-animation-delay: 1.6s;
	animation-delay: 1.6s;
        }

@keyframes sharpen {
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
	text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
@-webkit-keyframes sharpen{
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
/* 第三行*/
.char .char2 i {
	color: rgb(63,187,255);
    filter: alpha(opacity=100);
   	opacity: 1;
    text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-animation: sharpen 0.9s linear backwards;
    animation: sharpen 0.9s linear backwards;
    font-style: normal;
}

.char2 i {
            color: #fff;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
            text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            transition: all 0.3s linear;
            -webkit-animation: sharpen 0.9s linear backwards;
            -moz-animation: sharpen 0.9s linear backwards;
            -ms-animation: sharpen 0.9s linear backwards;
            animation: sharpen 0.9s linear backwards;
            font-style: normal;
}

.char2 i:nth-child(1) {
	-webkit-animation-delay: 1.7s;
	animation-delay: 1.7s;
        }

.char2 i:nth-child(2) {
	-webkit-animation-delay: 1.8s;
	animation-delay: 1.8s;
        }

.char2 i:nth-child(3) {
	-webkit-animation-delay: 1.9s;
	animation-delay: 1.9s;
        }

.char2 i:nth-child(4) {
	-webkit-animation-delay: 2.0s;
	animation-delay: 2.0s;
        }
@keyframes sharpen {
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
	text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
@-webkit-keyframes sharpen{
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
/*第四行*/
.char .char3 i {
	color: rgb(63,187,255);
    filter: alpha(opacity=100);
   	opacity: 1;
    text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-animation: sharpen 0.9s linear backwards;
    animation: sharpen 0.9s linear backwards;
    font-style: normal;
}

.char3 i {
            color: #fff;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
            text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            transition: all 0.3s linear;
            -webkit-animation: sharpen 0.9s linear backwards;
            -moz-animation: sharpen 0.9s linear backwards;
            -ms-animation: sharpen 0.9s linear backwards;
            animation: sharpen 0.9s linear backwards;
            font-style: normal;
}

.char3 i:nth-child(1) {
	-webkit-animation-delay: 2.1s;
	animation-delay: 2.1s;
        }

.char3 i:nth-child(2) {
	-webkit-animation-delay: 2.2s;
	animation-delay: 2.2s;
        }

.char3 i:nth-child(3) {
	-webkit-animation-delay: 2.3s;
	animation-delay: 2.3s;
        }

.char3 i:nth-child(4) {
	-webkit-animation-delay: 2.4s;
	animation-delay: 2.4s;
        }

.char3 i:nth-child(5) {
	-webkit-animation-delay: 2.5s;
	animation-delay: 2.5s;
        }

.char3 i:nth-child(6) {
	-webkit-animation-delay: 2.6s;
	animation-delay: 2.6s;
        }

.char3 i:nth-child(7) {
	-webkit-animation-delay: 2.7s;
	animation-delay: 2.7s;
        }

.char3 i:nth-child(8) {
	-webkit-animation-delay: 2.8s;
	animation-delay: 2.8s;
        }
@keyframes sharpen {
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
	text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
@-webkit-keyframes sharpen{
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
/*第五行*/
.char .char4 i {
	color: rgb(63,187,255);
    filter: alpha(opacity=100);
   	opacity: 1;
    text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-animation: sharpen 0.9s linear backwards;
    animation: sharpen 0.9s linear backwards;
    font-style: normal;
}

.char4 i {
            color: #fff;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
            text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            transition: all 0.3s linear;
            -webkit-animation: sharpen 0.9s linear backwards;
            -moz-animation: sharpen 0.9s linear backwards;
            -ms-animation: sharpen 0.9s linear backwards;
            animation: sharpen 0.9s linear backwards;
            font-style: normal;
}

.char4 i:nth-child(1) {
	-webkit-animation-delay: 2.9s;
	animation-delay: 2.9s;
        }

.char4 i:nth-child(2) {
	-webkit-animation-delay: 3.0s;
	animation-delay: 3.0s;
        }

.char4 i:nth-child(3) {
	-webkit-animation-delay: 3.1s;
	animation-delay: 3.1s;
        }

.char4 i:nth-child(4) {
	-webkit-animation-delay: 3.2s;
	animation-delay: 3.2s;
        }

.char4 i:nth-child(5) {
	-webkit-animation-delay: 3.3s;
	animation-delay: 3.3s;
        }

.char4 i:nth-child(6) {
	-webkit-animation-delay: 3.4s;
	animation-delay: 3.4s;
        }

.char4 i:nth-child(7) {
	-webkit-animation-delay: 3.4s;
	animation-delay: 3.4s;
        }

.char4 i:nth-child(8) {
	-webkit-animation-delay: 3.5s;
	animation-delay: 3.5s;
        }
.char4 i:nth-child(9) {
	-webkit-animation-delay: 3.6s;
	animation-delay: 3.6s;
        }
.char4 i:nth-child(10) {
	-webkit-animation-delay: 3.7s;
	animation-delay: 3.7s;
        }
.char4 i:nth-child(11) {
	-webkit-animation-delay: 3.8s;
	animation-delay: 3.8s;
        }
@keyframes sharpen {
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
	text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
@-webkit-keyframes sharpen{
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
/*第六行*/
.char .char5 i {
	color: rgb(63,187,255);
    filter: alpha(opacity=100);
   	opacity: 1;
    text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-animation: sharpen 0.9s linear backwards;
    animation: sharpen 0.9s linear backwards;
    font-style: normal;
}

.char5 i {
            color: #fff;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
            text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            transition: all 0.3s linear;
            -webkit-animation: sharpen 0.9s linear backwards;
            -moz-animation: sharpen 0.9s linear backwards;
            -ms-animation: sharpen 0.9s linear backwards;
            animation: sharpen 0.9s linear backwards;
            font-style: normal;
}

.char5 i:nth-child(1) {
	-webkit-animation-delay: 3.9s;
	animation-delay: 3.9s;
        }

.char5 i:nth-child(2) {
	-webkit-animation-delay: 4.0s;
	animation-delay: 4.0s;
        }

.char5 i:nth-child(3) {
	-webkit-animation-delay: 4.1s;
	animation-delay: 4.1s;
        }

.char5 i:nth-child(4) {
	-webkit-animation-delay: 4.2s;
	animation-delay: 4.2s;
        }

.char5 i:nth-child(5) {
	-webkit-animation-delay: 4.3s;
	animation-delay: 4.3s;
        }

.char5 i:nth-child(6) {
	-webkit-animation-delay: 4.4s;
	animation-delay: 4.4s;
        }
@keyframes sharpen {
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
	text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
@-webkit-keyframes sharpen{
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
/*第七行*/
.char .char6 i {
	color: rgb(63,187,255);
    filter: alpha(opacity=100);
   	opacity: 1;
    text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-animation: sharpen 0.9s linear backwards;
    animation: sharpen 0.9s linear backwards;
    font-style: normal;
}

.char6 i {
            color: #fff;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
            text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            transition: all 0.3s linear;
            -webkit-animation: sharpen 0.9s linear backwards;
            -moz-animation: sharpen 0.9s linear backwards;
            -ms-animation: sharpen 0.9s linear backwards;
            animation: sharpen 0.9s linear backwards;
            font-style: normal;
}

.char6 i:nth-child(1) {
	-webkit-animation-delay: 4.5s;
	animation-delay: 4.5s;
        }

.char6 i:nth-child(2) {
	-webkit-animation-delay: 4.6s;
	animation-delay: 4.6s;
        }

.char6 i:nth-child(3) {
	-webkit-animation-delay: 4.7s;
	animation-delay: 4.7s;
        }

.char6 i:nth-child(4) {
	-webkit-animation-delay: 4.8s;
	animation-delay: 4.8s;
        }

.char6 i:nth-child(5) {
	-webkit-animation-delay: 4.9s;
	animation-delay: 4.9s;
        }

.char6 i:nth-child(6) {
	-webkit-animation-delay: 5.0s;
	animation-delay: 5.0s;
        }
.char6 i:nth-child(7) {
	-webkit-animation-delay: 5.1s;
	animation-delay: 5.1s;
        }
@keyframes sharpen {
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
	text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}
@-webkit-keyframes sharpen{
	0% {
	filter: alpha(opacity=0);
	-webkit-opacity: 0;
	opacity: 0;
	text-shadow: 0px 0px 100px #fff;
	color: transparent;
            }

90% {
	opacity: 0.9;
	text-shadow: 0px 0px 10px #fff;
 	color: transparent;
            }

100% {
	color: #fff;
	filter: alpha(opacity=100);
	-webkit-opacity: 1;
	opacity: 1;
text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
}

#funlly{
    margin: auto 15% auto 15%;
    width:80%;
    height:20%;

}
#funlly ol li{
    float:left;
    list-style: none;
    padding:5%;
}
#funlly ol li a:link,a:visited{
    color:#FFF;
    text-decoration:none;
}
#funlly ol li a:hover{
    background:rgb(63,187,255);
}